{% extends 'base.html' %}
{% load static %}

{% block title %}用户管理 - 教务信息管理系统{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h2 class="mb-1">
                    <i class="fas fa-users me-2 text-primary"></i>
                    用户管理
                </h2>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{% url 'dashboard' %}">首页</a></li>
                        <li class="breadcrumb-item active">用户管理</li>
                    </ol>
                </nav>
            </div>
            <div>
                <a href="{% url 'accounts:user_create' %}" class="btn btn-primary">
                    <i class="fas fa-user-plus me-2"></i>创建用户
                </a>
            </div>
        </div>
    </div>
</div>

<!-- 搜索和筛选 -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <form method="get" class="row g-3">
                    <div class="col-md-4">
                        <div class="search-box">
                            <input type="text" 
                                   class="form-control" 
                                   name="search" 
                                   value="{{ search }}"
                                   placeholder="搜索用户名、姓名、邮箱或学院">
                            <i class="fas fa-search search-icon"></i>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <select name="role" class="form-select">
                            <option value="">所有角色</option>
                            {% for value, label in role_choices %}
                            <option value="{{ value }}" {% if role == value %}selected{% endif %}>
                                {{ label }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-outline-primary w-100">
                            <i class="fas fa-search me-1"></i>搜索
                        </button>
                    </div>
                    <div class="col-md-2">
                        <a href="{% url 'accounts:user_list' %}" class="btn btn-outline-secondary w-100">
                            <i class="fas fa-times me-1"></i>清除
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 用户列表 -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-list me-2"></i>
                    用户列表
                    <span class="badge bg-secondary ms-2">{{ paginator.count }} 个用户</span>
                </h5>
            </div>
            <div class="card-body p-0">
                {% if users %}
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead>
                            <tr>
                                <th>用户名</th>
                                <th>姓名</th>
                                <th>邮箱</th>
                                <th>角色</th>
                                <th>学院</th>
                                <th>状态</th>
                                <th>注册时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for user in users %}
                            <tr>
                                <td>
                                    <strong>{{ user.username }}</strong>
                                    {% if user.is_superuser %}
                                    <span class="badge bg-danger ms-1">超级管理员</span>
                                    {% endif %}
                                </td>
                                <td>{{ user.first_name|default:'-' }}</td>
                                <td>
                                    {% if user.email %}
                                    <a href="mailto:{{ user.email }}">{{ user.email }}</a>
                                    {% else %}
                                    -
                                    {% endif %}
                                </td>
                                <td>
                                    <span class="badge {% if user.userprofile.role == 'admin' %}bg-primary{% else %}bg-info{% endif %}">
                                        {{ user.userprofile.get_role_display }}
                                    </span>
                                </td>
                                <td>{{ user.userprofile.college_name|default:'-' }}</td>
                                <td>
                                    {% if user.is_active %}
                                    <span class="badge bg-success">激活</span>
                                    {% else %}
                                    <span class="badge bg-secondary">禁用</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <small class="text-muted">
                                        {{ user.date_joined|date:"Y-m-d H:i" }}
                                    </small>
                                </td>
                                <td>
                                    <div class="action-buttons">
                                        <a href="{% url 'accounts:user_update' user.pk %}" 
                                           class="btn btn-sm btn-outline-primary"
                                           title="编辑">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        {% if user != request.user %}
                                        <a href="{% url 'accounts:user_delete' user.pk %}" 
                                           class="btn btn-sm btn-outline-danger"
                                           title="删除"
                                           onclick="return confirm('确定要删除用户 {{ user.username }} 吗？')">
                                            <i class="fas fa-trash"></i>
                                        </a>
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                
                <!-- 分页 -->
                {% if is_paginated %}
                <div class="card-footer">
                    <nav aria-label="用户列表分页">
                        <ul class="pagination justify-content-center mb-0">
                            {% if page_obj.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?page=1{% if search %}&search={{ search }}{% endif %}{% if role %}&role={{ role }}{% endif %}">
                                    <i class="fas fa-angle-double-left"></i>
                                </a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if search %}&search={{ search }}{% endif %}{% if role %}&role={{ role }}{% endif %}">
                                    <i class="fas fa-angle-left"></i>
                                </a>
                            </li>
                            {% endif %}
                            
                            {% for num in page_obj.paginator.page_range %}
                            {% if page_obj.number == num %}
                            <li class="page-item active">
                                <span class="page-link">{{ num }}</span>
                            </li>
                            {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ num }}{% if search %}&search={{ search }}{% endif %}{% if role %}&role={{ role }}{% endif %}">{{ num }}</a>
                            </li>
                            {% endif %}
                            {% endfor %}
                            
                            {% if page_obj.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if search %}&search={{ search }}{% endif %}{% if role %}&role={{ role }}{% endif %}">
                                    <i class="fas fa-angle-right"></i>
                                </a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if search %}&search={{ search }}{% endif %}{% if role %}&role={{ role }}{% endif %}">
                                    <i class="fas fa-angle-double-right"></i>
                                </a>
                            </li>
                            {% endif %}
                        </ul>
                    </nav>
                    
                    <div class="text-center mt-2">
                        <small class="text-muted">
                            显示第 {{ page_obj.start_index }} - {{ page_obj.end_index }} 条，共 {{ paginator.count }} 条记录
                        </small>
                    </div>
                </div>
                {% endif %}
                
                {% else %}
                <div class="empty-state">
                    <i class="fas fa-users"></i>
                    <p>没有找到用户</p>
                    <a href="{% url 'accounts:user_create' %}" class="btn btn-primary">
                        <i class="fas fa-user-plus me-2"></i>创建第一个用户
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}